<template>
  <div class="hello">
<el-form :model="applyForm" :rules="rules" ref="applyForm" label-width="100px">

  <el-form-item label="项目名" prop="name">
    <el-input v-model="applyForm.name"></el-input>
  </el-form-item>
  <el-form-item label="项目地址" prop="url">
    <el-input v-model="applyForm.url"></el-input>
  </el-form-item>
  <el-form-item label="回调地址" prop="redirectUri">
    <el-input v-model="applyForm.redirectUri"></el-input>
  </el-form-item>
  <el-form-item label="你的邮箱" prop="email">
    <el-input v-model="applyForm.email"></el-input>
  </el-form-item>
  <el-form-item label="备注" prop="applyReason">
    <el-input v-model="applyForm.applyReason"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('applyForm')">立即申请</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>

import {getInstance} from '@/utils/request'
const instance = getInstance();
export default {
  data(){
    return {
      applyForm: {
        
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名', trigger: 'blur' },
          {  max: 20, message: '长度最多 20 个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入项目地址', trigger: 'blur' },
          {  type: 'url', message: '格式不对', trigger: 'blur' }
        ],
        redirectUri: [
          { required: true, message: '请输入回调地址', trigger: 'blur' },
          {  type: 'url', message: '格式不对', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入你的邮箱', trigger: 'blur' },
          {  type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        applyReason: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          {  max: 40, message: '长度最多 40 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            instance.post('/userapi/clients', this.applyForm).then(res => {
              if(res.data &&res.data.result === 0) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                setTimeout(() => {
                  window.location.href = 'http://49.234.112.25:9100/docs'
                }, 2000);
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(() => {
              this.$message.error('添加失败')
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>

<style>
</style>
